<template>
  <div>
      <el-form :model="searchForm" inline label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="searchForm.username" clearable placeholder="输入准确用户名"/>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="searchForm.nickname" clearable placeholder="模糊匹配昵称"/>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="searchForm.phone" clearable placeholder="输入准确手机号"/>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" clearable placeholder="选择状态">
            <el-option label="可用" :value="1"/>
            <el-option label="禁用" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="searchForm.roleId" clearable filterable placeholder="选择角色">
            <el-option v-for="role in roleList" :key="role.id" :label="role.roleName" :value="role.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="searchForm.departmentId" clearable filterable placeholder="选择部门">
            <el-option v-for="department in departmentList" :key="department.id" :label="department.departmentName" :value="department.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getUserList">搜索</el-button>
          <el-button @click="clearForm">清空</el-button>
        </el-form-item>
      </el-form>
      <div class="btn-group">
        <el-button type="primary" size="mini" @click="openDialog()">添加</el-button>
      </div>
      <el-table :data="userinfoList" border>
        <el-table-column prop="id" label="编号" align="center"/>
        <el-table-column prop="username" label="用户名" align="center"/>
        <el-table-column prop="nickname" label="昵称" align="center"/>
        <el-table-column prop="phone" label="手机号" align="center"/>
        <el-table-column prop="roleName" label="角色" align="center"/>
        <el-table-column prop="departmentName" label="部门" align="center"/>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === 1" size="mini" type="success" @click="changeStatus(scope.row.id,2)">可用</el-button>
            <el-button v-else size="mini" type="danger" @click="changeStatus(scope.row.id,1)">禁用</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="isDriver" label="驾照" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.isDriver === 1" size="mini" @click="showDriver(scope.row)" type="text">查看驾照</el-button>
            <el-button v-else disabled size="mini" type="text">暂无驾照</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="160px">
          <template slot-scope="scope">
            <el-button size="mini" @click="openDialog(scope.row.id)">修改</el-button>
            <el-button size="mini" @click="deleteInfo(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    <el-pagination hide-on-single-page :current-page="pageInfo.page" :page-size="pageInfo.limit" :page-sizes="[5,10,20,50,100]" @current-change="currentChange" @size-change="sizeChange" layout="total,sizes,prev,pager,next,jumper" :total="pageInfo.total"/>
    <userinfo-update ref="userinfoUpdate" @closeDialog="getUserList"/>
    <el-dialog :visible.sync="showPhoto" title="驾照详情" v-if="showPhoto">
      <el-descriptions direction="vertical" :column="2" border>
        <el-descriptions-item label="驾照正面">
          <el-image :src="photoList[0]" :preview-src-list="photoList"></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="驾照反面">
          <el-image :src="photoList[1]" :preview-src-list="photoList"></el-image>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import UserinfoUpdate from '@/views/userinfo/UserinfoUpdate.vue'

const initData = {
  username: '',
  nickname: '',
  phone: '',
  status: '',
  roleId: '',
  departmentId: ''
}
export default {
  name: 'UserinfoList',
  components: { UserinfoUpdate },
  data () {
    return {
      searchForm: {
        ...initData
      },
      pageInfo: {
        page: 1,
        limit: 5,
        total: 0
      },
      roleList: [],
      departmentList: [],
      userinfoList: [],
      showPhoto: false,
      photoList: [],
      baseImage: process.env.VUE_APP_IMAGE_URL
    }
  },
  methods: {
    getRoleList () {
      this.$http.get('role/select').then(data => {
        this.roleList = [...data]
      })
    },
    getDepartmentList () {
      this.$http.get('department/select').then(data => {
        this.departmentList = [...data]
      })
    },
    getUserList () {
      this.$http.get('userinfo/page', { ...this.searchForm, ...this.pageInfo }).then(data => {
        if (data) {
          this.userinfoList = [...data.rows]
          this.pageInfo.total = data.count
        }
      }).catch(() => {})
    },
    currentChange (page) {
      this.pageInfo.page = page
      this.getUserList()
    },
    sizeChange (limit) {
      this.pageInfo.limit = limit
      this.getUserList()
    },
    clearForm () {
      this.searchForm = { ...initData }
      this.pageInfo = {
        page: 1,
        limit: 5,
        total: 0
      }
      this.getUserList()
    },
    changeStatus (id, status) {
      this.$confirm(`确定更改编号<span style="font-weight: bold;color: #66b1ff">[${id}]</span>的状态为${status === 1 ? '<span style="color: green;font-weight: bold;">可用</span>' : '<span style="color: red;font-weight: bold;">禁用</span>'}吗?`, '询问', { dangerouslyUseHTMLString: true }).then(() => {
        this.$http.post('userinfo/status', { id, status }).then(() => {
          this.$message.success('更新状态成功')
          this.getUserList()
        }).catch(() => {})
      }).catch(() => {})
    },
    deleteInfo (id) {
      this.$confirm(`确定删除编号<span style="font-weight: bold;color: #66b1ff">[${id}]</span>的数据吗?`, '询问', { dangerouslyUseHTMLString: true }).then(() => {
        this.$http.delete(`userinfo/delete/${id}`).then(() => {
          this.$message.success('删除成功！')
          this.getUserList()
        }).catch(() => {})
      }).catch(() => {})
    },
    openDialog (id) {
      this.$refs.userinfoUpdate.init(id)
    },
    showDriver (row) {
      this.photoList.push(this.baseImage + row.driverPhoto1, this.baseImage + row.driverPhoto2)
      this.showPhoto = true
    }
  },
  created () {
    this.getDepartmentList()
    this.getRoleList()
    this.getUserList()
  }
}
</script>

<style scoped>

</style>
<style>
.el-descriptions-item__cell{
  text-align: center !important;
}
</style>
